<template>
  <div class="m-content-box">
    <div class="m-brand-box">
      <div class="brand-name">
        <div id="brandNameTextBox" class="text-box">
          <span id="brandNameText" class="name">简奕约课</span>
        </div>
      </div>
      <div class="brand-info-qrcode-box">
        <!-- 约课二维码 -->
        <div class="weixin-box">
          <div class="wx-has">
            <div class="title color-norm-1">
              品牌有微信公众号
            </div>
            <div class="wx-has-tips">
              复制下方URL，去微信公众号里设置菜单，会员关注公众号，验证身份即可自主约课
            </div>
            <input id="wxUrl" type="text" class="wx-url" value="">
            <button id="copyUrl" type="button" data-clipboard-text="https://vcloud.keepyoga.com/weixin/getRedirectUrl.php?brand_id=M01_eURTQnVZVWlqUm89&amp;themes=bamboo&amp;venue_id=5&amp;r=99550">复制URL地址</button>
          </div>
          <div class="wx-qrcode-box clear">
            <div class="qrcode-left-box">
              <div class="title color-norm-3">
                品牌有个人微信公众号
              </div>
              <p class="text">
                保存约课二维码图片，在<span class="strong">公众号</span> -&gt; <span class="strong">自定义菜单</span>中配置该图片，<br>会员点击该菜单即可扫描约课二维码预约
              </p>
              <div class="title color-norm-2">
                品牌没有微信公众号
              </div>
              <p class="text">
                打开<span class="strong">微信</span> -&gt; <span class="strong">扫描二维码</span>进入约课，点击右上角“…”分享给会员，<br>会员点击即可查看课表并约课
              </p>
            </div>
            <div class="qrcode-right-box">
              <div class="wx-qrcode">
<!--                <span class="qrcode-mark" />-->
                <div id="J_QRCodeContainer" ><canvas width="152" height="152" style="display: none;" /><img src="../../icons/png/qrcode-wx.png" style="display: block;"></div>
              </div>
              <p class="down-qrcode js-down-qrcode" data-val="1"><img loading="lazy" src="img/svg-download.svg?v=d3d8488" alt="">下载二维码图片</p>
            </div>
          </div>
        </div>
        <!-- /约课二维码 -->
      </div>
      <!-- 约课并签到二维码 -->
      <div class="order-onsite">
        <div class="order-onsite__title">约课并签到二维码</div>
        <div class="order-onsite__left">
          <p class="order-onsite__desc">
            会员打开<span class="strong">微信</span> -&gt; <span class="strong">扫描二维码</span>进入约课，即可在约课后由系统自动签到。<br>
            此二维码仅支持预约当日课程
          </p>
        </div>
        <div class="order-onsite__qrcode-box">
          <div class="order-onsite__qrcode-container">
<!--            <span class="order-onsite__qrcode-icon" />-->
            <div id="qrcodeForOnSite" class="order-onsite__qrcode"><canvas width="152" height="152" style="display: none;" /><img src="../../icons/png/qrcode-wx.png" style="display: block;"></div>
          </div>
          <div class="order-onsite__qrcode-download js-down-qrcode" data-val="2"><img loading="lazy" src="img/svg-download.svg?v=d3d8488" alt="">下载二维码图片</div>
        </div>
      </div>
      <!-- /约课并签到二维码 -->
    </div>
  </div>
</template>

<script>
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex'

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      updateShow: false,
      addShow: false
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '约课设置',
      url: '/system/appointmentSettings',
      pd: true
    }, {
      name: '头条设置',
      url: '/system/headlinesSettings',
      pd: true
    }, {
      name: '广告设置',
      url: '/system/wxAdvertising',
      pd: true
    }, {
      name: '会员自主请假',
      url: '/system/leaveSettings',
      pd: true
    }, {
      name: '卡售价显示设置',
      url: '/system/mcardPriceDisplaySettings',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
  },
  methods: {
  }
}
</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
  font-size: 14px;
}
div {
  display: block;
  unicode-bidi: isolate;
}
.m-brand-box {
  width: 670px;
  height: 650px;
  margin: 60px auto 0;
}
.m-brand-box .brand-name {
  margin-bottom: 6px;
  font-size: 16px;
}
.brand-info-qrcode-box {
  width: 670px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
.order-onsite {
  position: relative;
  margin-top: 30px;
  width: 670px;
  height: 290px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
.text-box {
  height: 22px;
  line-height: 22px;
}
.m-brand-box .weixin-box {
  position: relative;
  background: #ffffff;
}
.m-brand-box .weixin-box .wx-has {
  margin-bottom: 40px;
}
.clear {
  zoom: 1;
}
.m-brand-box .weixin-box .title {
  position: relative;
  width: 190px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 15px;
  text-align: center;
  background: #efeff2;
}

.color-norm-1 {
  color: #41c3a8;
}
.m-brand-box .weixin-box .wx-has-tips {
  color: #787878;
  margin: 0 40px;
  font-size: 12px;
  line-height: 1.5;
  padding-top: 10px;
  margin-bottom: 10px;
}
.m-brand-box .weixin-box .wx-url {
  width: 452px;
  height: 18px;
  margin: 0 10px 0 40px;
  border: 1px solid #f2f2f2;
  display: inline-block;
  padding: 8px;
  border-radius: 4px;
}

input {
  caret-color: #41c3a8;
}
input, button, a img, select, textarea {
  outline: 0;
}
.m-brand-box .weixin-box button {
  display: inline-block;
  padding: 0 10px;
  height: 34px;
  margin-right: 10px;
  line-height: 34px;
  text-align: center;
  color:#ffffff;
  background: #41c3a8;
  border-radius: 6px;
  vertical-align: top;
}
.qrcode-left-box {
  float: left;
}
.qrcode-right-box {
  float: left;
  width: 176px;
  margin-left: 56px;
  text-align: center;
}
.qrcode-right-box .wx-qrcode {
  position: relative;
  padding: 12px;
  margin-bottom: 10px;
  background: #f4f4f7;
}
.qrcode-right-box .down-qrcode {
  color: #41c3a8;
  cursor: pointer;
}
.m-brand-box .weixin-box .title {
  position: relative;
  width: 190px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 15px;
  text-align: center;
  background: #efeff2;
}

.color-norm-3 {
  color: #48a9f3;
}
.m-brand-box .weixin-box .wx-qrcode-box .strong {
  color: #48a9f3;
}

.color-norm-2 {
  color: #f49352;
}
.wx-qrcode-box .text {
  font-size: 12px;
  color: #787878;
  margin: 0 0 32px 40px;
  line-height: 1.5;
}
.order-onsite__title {
  position: relative;
  width: 190px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 15px;
  text-align: center;
  color: #41c3a8;
  background: #efeff2;
}
.order-onsite__qrcode-box {
  position: absolute;
  top: 57px;
  right: 42px;
  width: 176px;
  height: 176px;
}
.order-onsite__desc {
  font-size: 12px;
  color: #787878;
  margin: 0 0 32px 40px;
  line-height: 1.5;
}
.order-onsite__qrcode-container {
  position: relative;
  padding: 12px;
  background: #f4f4f7;
}
.order-onsite__qrcode-download {
  padding: 10px 0 30px;
  text-align: center;
  color: #41c3a8;
  cursor: pointer;
}
.order-onsite__qrcode-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  padding: 3px;
  background: #ffffff url(../../../public/img/svg-scan-order.svg) no-repeat center center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.order-onsite__qrcode {
  width: 152px;
  height: 152px;
}
.order-onsite__qrcode-download {
  padding: 10px 0 30px;
  text-align: center;
  color: #41c3a8;
  cursor: pointer;
}
.m-brand-box .weixin-box .wx-qrcode-box {
  min-height: 246px;
}

img {
  max-width: 100%;
}
.qrcode-right-box .wx-qrcode .qrcode-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  padding: 3px;
  background: #ffffff url(../../../public/img/svg-scan-order.svg) no-repeat center center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
